<template>
  <q-page class="q-pa-md">
    <div>
      <titleList :titleListData="['通用管理','用户管理']" />
      <div style="position: absolute;left:150px;top:10px">
        <el-button
          @click="addUser"
          type="primary"
          icon="Plus"
          size="small"
          style="margin: 15px 0 0 40px"
        >添加角色</el-button>
      </div>
      <div class="search-input-content">
        <el-input
          placeholder="搜索用户名称"
        >
          <template #append>
            <el-button color="#F5F7FA"><el-icon><Search /></el-icon></el-button>
          </template>
        </el-input>
    </div>
    </div>
    <el-table
      :header-cell-style="{ background: 'rgb(242,242,242)', color: 'rgb(16,16,16)', fontWeight: 'bold', textAlign: 'center' }"
      :cell-style="{ fontSize: '12px', textAlign: 'center' }"
      :data="roleDate"
      :row-class-name="tableClass"
    >
      <el-table-column label="角色名称" prop="role_name"></el-table-column>
      <el-table-column label="角色描述" prop="role_desc"></el-table-column>
      <el-table-column label="创建时间" prop="role_times"></el-table-column>
      <el-table-column label="类型" prop="role_type"></el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button @click="edit(scope.$index)" size="small" link style="color: rgb(64,149,249)">修改</el-button>
          <el-button @click="permission" size="small" link style="color: rgb(64,149,249)">权限</el-button>
          <el-button @click="deleteRole" size="small" link style="color: rgb(64,149,249)">删除</el-button>
        </template>
      </el-table-column>
      <template #empty>
        <div class="noData">暂无数据</div>
      </template>
    </el-table>
    <div class="row" style="justify-content:flex-end;">
      <el-pagination
        background layout="total, prev, pager, next"
        :total='50' style="margin-top: 20px;"
        page-size="10" hide-on-single-page="true"/>
    </div>
    <!--新增/修改用户-->
    <el-dialog v-model="editDialog" title="添加角色" width="600px" :close-on-click-modal="false">
      <div>
        <el-form ref="ruleFormRef" :model="editData" :rules="rules" label-width="100px" >
          <el-form-item label="角色名称:" prop="role_name">
            <el-input v-model.trim="editData.role_name" placeholder="用户名"></el-input>
          </el-form-item>
          <el-form-item label="类型:" prop="role_type">
            <el-select v-model="editData.role_type" placeholder="请选择角色所属类型">
              <el-option label="系统" value="shanghai" />
              <el-option label="项目" value="beijing" />
            </el-select>
          </el-form-item>
          <el-form-item label="角色描述:">
            <el-input type="textarea" :rows="6" v-model="editData.role_desc" placeholder="请输入" show-word-limit maxlength="100" />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editDialog = false">取消</el-button>
          <el-button type="primary" @click="submitForm(ruleFormRef)">确定</el-button>
        </span>
      </template>
    </el-dialog>
    <!--删除用户-->
    <el-dialog v-model="deleteRoleDialog" :show-close="false" width="500px" :close-on-click-modal="false">
      <template #header="{}">
        <div style="display: flex;justify-content:space-between;margin-top: 10px">
          <div style="display:flex;">
            <el-icon style="font-size: 20px; color: #FFA940"><WarningFilled /></el-icon>
            <span style="margin-left: 10px;color: #FFA940;font-weight: bold">删除提醒</span>
          </div>
        </div>
      </template>
      <div style="margin: 0 0 50px 50px;padding: 0">确定删除该用户嘛?删除后不可恢复,请谨慎操作！</div>
      <div style="display: flex;justify-content: flex-end;margin-right: 10px;margin-bottom: 10px">
        <el-button @click="deleteRoleDialog = false">放弃删除</el-button>
        <el-button type="primary" @click="deleteRoleDialog = false">继续删除</el-button>
      </div>
    </el-dialog>
  </q-page>
</template>
<script setup lang="ts">
import titleList from 'components/subTitleList.vue';
import { ref,reactive,toRaw } from "vue";
import { FormInstance, FormRules } from "element-plus";
const editDialog = ref(false)
const deleteRoleDialog = ref(false)
const editData = ref();
const ruleFormRef = ref<FormInstance>()
const roleDate = reactive([
  {
    role_name: '张三',
    role_desc: 'XXXX',
    role_times: '2021-08-09 13: 21:22',
    role_type: '系统'
  },
  {
    role_name: '张三',
    role_desc: 'XXXX',
    role_times: '2021-08-09 13: 21:22',
    role_type: '系统'
  },
  {
    role_name: '张三',
    role_desc: 'XXXX',
    role_times: '2021-08-09 13: 21:22',
    role_type: '系统'
  },
  {
    role_name: '张三',
    role_desc: 'XXXX',
    role_times: '2021-08-09 13: 21:22',
    role_type: '系统'
  }
])

//给列表偶数行添加样式
const tableClass = ({ row, rowIndex }) => {
  if (rowIndex % 2 == 1) {
    return "even-row";
  } else {
    return "";
  }
}


interface RuleForm {
  role_name: string
  role_type: string
}
const rules = reactive<FormRules<RuleForm>>({
  role_name: [{ required: true, message: '请填写用户名称', trigger: 'blur' }],
  role_type: [{ required: true, message: '请选择用户权限', trigger: 'change' }]
})
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('111',editData.value)
    } else {
      console.log('error submit!', fields)
    }
  })
}

//操作
//新增用户
const addUser = () => {
  editData.value = {}
  editDialog.value = true;
}
//修改用户
const edit = (index:any) => {
  editData.value = toRaw(roleDate[index])
  editDialog.value = true;
}
//权限
const permission = () => {
  console.log('111');
}
//删除用户
const deleteRole = () => {
  deleteRoleDialog.value = true;
}

</script>
<style scoped lang="scss">
.search-input-content {
  display: flex;
  align-items: center;
  position: absolute;
  right: 10px;
  top: 18px;
  cursor: pointer
}
</style>
